<div ng-controller="ListenerDetailsController as ctrl">
  <p translate>Provide the details for the listener.</p>

  <div class="row">

    <div class="col-xs-12 col-sm-8 col-md-6">
      <div class="form-group">
        <label translate class="control-label" for="name">Name</label>
        <input name="name" id="name" type="text" class="form-control"
               ng-model="model.spec.listener.name">
      </div>
    </div>

    <div class="col-xs-12 col-sm-8 col-md-6">
      <div class="form-group">
        <label translate class="control-label" for="description">Description</label>
        <input name="description" id="description" type="text" class="form-control"
               ng-model="model.spec.listener.description">
      </div>
    </div>

  </div>

  <div class="row">

    <div class="col-xs-12 col-sm-8 col-md-6">
      <div class="form-group required">
        <label class="control-label" for="protocol">
          <translate>Protocol</translate>
          <span class="hz-icon-required fa fa-asterisk"></span>
        </label>
        <select class="form-control" name="protocol" id="protocol"
                ng-model="model.spec.listener.protocol" ng-required="true"
                ng-change="ctrl.protocolChange(model.spec.listener.protocol)"
                ng-disabled="model.context.id">
          <option ng-repeat="protocol in model.listenerProtocols" value="{$ protocol $}"
                  ng-disabled="protocol==='TERMINATED_HTTPS' && model.certificatesError">{$ protocol $}</option>
        </select>
      </div>
    </div>

    <div class="col-xs-12 col-sm-8 col-md-6">
      <div class="form-group required"
           ng-class="{ 'has-error': listenerDetailsForm.port.$invalid && listenerDetailsForm.port.$dirty }">
        <label class="control-label" for="port">
          <translate>Port</translate>
          <span class="hz-icon-required fa fa-asterisk"></span>
        </label>
        <input name="port" id="port" type="number" class="form-control"
               ng-model="model.spec.listener.protocol_port" ng-pattern="/^\d+$/" min="1" max="65535"
               ng-required="true" ng-disabled="model.context.id"
               validate-unique="model.listenerPorts">
        <span class="help-block" ng-show="(listenerDetailsForm.port.$error.number || listenerDetailsForm.port.$error.required) && listenerDetailsForm.port.$dirty">
          {$ ::ctrl.portNumberError $}
        </span>
        <span class="help-block" ng-show="!(listenerDetailsForm.port.$error.number || listenerDetailsForm.port.$error.required) && listenerDetailsForm.port.$error.unique && listenerDetailsForm.port.$dirty">
          {$ ::ctrl.portUniqueError $}
        </span>
      </div>
    </div>

  </div>

  <div class="row" ng-if="model.spec.listener.protocol !== 'UDP'">

    <div class="col-xs-12 col-sm-8 col-md-6">
      <div class="form-group required">
        <label class="control-label" for="protocol">
          <translate>Client Data Timeout</translate>
        </label>
        <input name="timeout_client_data" id="timeout_client_data" type="number" class="form-control"
               ng-model="model.spec.listener.timeout_client_data" ng-pattern="/^\d+$/" min="0" max="31536000000">
        <span class="help-block" ng-show="listenerDetailsForm.timeout_client_data.$error.number && listenerDetailsForm.timeout_client_data.$dirty">
          {$ ::ctrl.timeoutError $}
        </span>
      </div>
    </div>

    <div class="col-xs-12 col-sm-8 col-md-6">
      <div class="form-group required">
        <label class="control-label" for="protocol">
          <translate>TCP Inspect Timeout</translate>
        </label>
        <input name="timeout_tcp_inspect" id="timeout_tcp_inspect" type="number" class="form-control"
               ng-model="model.spec.listener.timeout_tcp_inspect" ng-pattern="/^\d+$/" min="0" max="31536000000">
        <span class="help-block" ng-show="listenerDetailsForm.timeout_tcp_inspect.$error.number && listenerDetailsForm.timeout_tcp_inspect.$dirty">
          {$ ::ctrl.timeoutError $}
        </span>
      </div>
    </div>

  </div>

  <div class="row" ng-if="model.spec.listener.protocol !== 'UDP'">

    <div class="col-xs-12 col-sm-8 col-md-6">
      <div class="form-group required">
        <label class="control-label" for="protocol">
          <translate>Member Connect Timeout</translate>
        </label>
        <input name="timeout_member_connect" id="timeout_member_connect" type="number" class="form-control"
               ng-model="model.spec.listener.timeout_member_connect" ng-pattern="/^\d+$/" min="0" max="31536000000">
        <span class="help-block" ng-show="listenerDetailsForm.timeout_member_connect.$error.number && listenerDetailsForm.timeout_member_connect.$dirty">
          {$ ::ctrl.timeoutError $}
        </span>
      </div>
    </div>

    <div class="col-xs-12 col-sm-8 col-md-6">
      <div class="form-group required">
        <label class="control-label" for="protocol">
          <translate>Member Data Timeout</translate>
        </label>
        <input name="timeout_member_data" id="timeout_member_data" type="number" class="form-control"
               ng-model="model.spec.listener.timeout_member_data" ng-pattern="/^\d+$/" min="0" max="31536000000">
        <span class="help-block" ng-show="listenerDetailsForm.timeout_member_data.$error.number && listenerDetailsForm.timeout_member_data.$dirty">
          {$ ::ctrl.timeoutError $}
        </span>
      </div>
    </div>

  </div>

  <div class="row">

    <div class="col-xs-12 col-sm-8 col-md-6">
      <div class="form-group required"
           ng-class="{ 'has-error': listenerDetailsForm.connection_limit.$invalid && listenerDetailsForm.connection_limit.$dirty }">
        <label class="control-label" for="connection_limit">
          <translate>Connection Limit</translate>
          <span class="hz-icon-required fa fa-asterisk"></span>
        </label>
        <input name="connection_limit" id="connection_limit" type="number" class="form-control"
               ng-model="model.spec.listener.connection_limit" ng-pattern="/^-?\d+$/" min="-1"
               ng-required="true">
        <span class="help-block" ng-show="(listenerDetailsForm.connection_limit.$error.number || listenerDetailsForm.connection_limit.$error.required) && listenerDetailsForm.connection_limit.$dirty">
          {$ ::ctrl.connectionLimitError $}
        </span>
      </div>
    </div>

    <div class="col-xs-12 col-sm-8 col-md-6" ng-if="model.context.id">
      <div class="form-group">
        <label class="control-label">
          <translate>Default Pool ID</translate>
        </label>
        <select class="form-control" name="default_pool_id" id="default_pool_id"
                ng-model="model.spec.listener.default_pool_id">
          <option value="">None</option>
          <option ng-repeat="pool_id in model.spec.availablePools" value="{$ pool_id.substring(0, 36) $}">
            {$ pool_id $}
          </option>
        </select>
      </div>
    </div>

  </div>

  <h4 translate ng-if="model.spec.listener.protocol === 'HTTP' || model.spec.listener.protocol === 'TERMINATED_HTTPS'">Insert Headers</h4>

  <div class="row form-group" ng-if="model.spec.listener.protocol === 'HTTP' || model.spec.listener.protocol === 'TERMINATED_HTTPS'">

    <div class="col-xs-12 col-sm-8 col-md-6">
      <div class="form-group">
        <div class="themable-checkbox">
          <input type="checkbox"
                 ng-true-value="'True'"
                 ng-false-value="''"
                 id="x_forwarded_for"
                 ng-model="model.spec.listener.insert_headers['X-Forwarded-For']">
          <label for="x_forwarded_for">
            <span translate>X-Forwarded-For</span>
          </label>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-8 col-md-6">
      <div class="form-group">
        <div class="themable-checkbox">
          <input type="checkbox"
                 ng-true-value="'True'"
                 ng-false-value="''"
                 id="x_forwarded_port"
                 ng-model="model.spec.listener.insert_headers['X-Forwarded-Port']">
          <label for="x_forwarded_port">
            <span translate>X-Forwarded-Port</span>
          </label>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-8 col-md-6">
      <div class="form-group">
        <div class="themable-checkbox">
          <input type="checkbox"
                 ng-true-value="'True'"
                 ng-false-value="''"
                 id="x_forwarded_proto"
                 ng-model="model.spec.listener.insert_headers['X-Forwarded-Proto']">
          <label for="x_forwarded_proto">
            <span translate>X-Forwarded-Proto</span>
          </label>
        </div>
      </div>
    </div>

  </div>

  <div class="row">

    <div class="col-xs-12 col-sm-8 col-md-6">
      <div class="form-group">
        <label class="control-label required" translate>Admin State Up</label>
        <div class="form-field">
          <div class="btn-group">
            <label class="btn btn-default"
                   ng-repeat="option in model.yesNoOptions"
                   ng-model="model.spec.listener.admin_state_up"
                   uib-btn-radio="option.value">{$ ::option.label $}</label>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>
